<template>
	<!-- 电梯信息管理/设定队列 -->
	<div class="operationBox heightMax publicbox duiBox" v-loading='loading'>
		<!-- 	<el-row :gutter="10">
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">资源名称：</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请输入资源名称" clearable v-model="query"></el-input>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">资源类型：</span>
					<el-select v-model="resource" placeholder="请选择资源类型" size="mini" clearable>
						<el-option v-for="item in resourceArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="1.5">
				<div v-if="showVis">
					<el-popover placement="bottom" width="400" v-model="showProp" trigger="manual">
						<el-row :gutter="10" class='currentRow1'>
							<el-col :offset='1' :span="11">
								<el-row>
									<el-col :span="8">
										<span class="font14 marginTop5">播放模式：</span>
									</el-col>
									<el-col :span="16">
										<el-select size="mini" placeholder="请选择播放模式" clearable v-model="playMode">
											<el-option v-for="item in playModeArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
										</el-select>
									</el-col>
								</el-row>
							</el-col>
							<el-col :offset='1' :span="11">
								<el-row>
									<el-col :span="8">
										<span class="font14 marginTop5">适用终端：</span>
									</el-col>
									<el-col :span="16">
										<el-select size="mini" placeholder="请选择适用终端" clearable v-model="terminal">
											<el-option v-for="item in terminalArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
										</el-select>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row :gutter="10" class='currentRow1'>
							<el-col :offset='1' :span="11">
								<el-row>
									<el-col :span="8">
										<span class="font14 marginTop5">文件大小：</span>
									</el-col>
									<el-col :span="16">
										<el-input size="mini" placeholder="情输入文件范围" v-model="startKb" clearable @change="inputChange"></el-input>
									</el-col>
								</el-row>
							</el-col>

							<el-col :offset='1' :span="11">
								<el-row>
									<el-col :span="4">
										<span>~</span>
									</el-col>
									<el-col :span="20">
										<el-input size="mini" v-model="endKb" placeholder="情输入文件范围" clearable :disabled="endDisabled"></el-input>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<div class="btnBox">
							<el-button type="primary" size="mini" @click="find">确定</el-button>
							<el-button size="mini" @click="closeVis">关闭</el-button>
						</div>
					</el-popover>
				</div>
				<el-button :type="btnType" class='btnMargin' @click='showVis = true' size="mini">更多查询条件</el-button>
			</el-col>
			<el-button type="primary" icon="el-icon-search" size="mini" class='fl' @click='find'>搜索</el-button>
			<el-button icon="el-icon-delete" @click='reset' class='fl' size="mini">重置</el-button>
		</el-row> -->
		<!-- 	<div class="listName">
			<i></i><span class="font14">电梯大修列表</span>
		</div> -->
		<el-row :gutter="10">
			<el-col :span="1.5">
				<el-button type="success" @click='newAdd(1)' size="mini">新建模式</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="primary" :disabled="disableBtn" @click='newAdd(2)' size="mini">编辑模式</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" :disabled="disableBtn" @click='newAdd(3)' size="mini">模式详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="disableBtn" @click='remove(1)' size="mini">删除模式</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" size="mini" :disabled="disableBtn" @click='newAdd(4)'>新增图片</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" size="mini" :disabled="removePic" @click='removePicClick'>删除图片</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="danger" :disabled="disableBtnAll   " @click='remove(2)' v-if="deleteBtnShow" size="mini">批量删除</el-button>
			</el-col> -->
			<div class="fr">
				<el-button size="mini" @click='goBack'>返回</el-button>
			</div>
		</el-row>
		<div class="duiBoxMess">
			<el-row>
				<el-col :span="6">
					<!-- <span class="messTit font15">队列编号：</span><span class="mess font14"></span> -->
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">队列名称：</span><span class="mess font14">{{currentRowList.name}} </span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">队列描述：</span><span class="mess font14">{{currentRowList.qdesc}}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">适用终端：</span><span class="mess font14">{{currentRowList.ttypeName}}</span>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">创建用户：</span><span class="mess font14">{{currentRowList.create_user}}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">创建时间：</span><span class="mess font14">{{currentRowList.create_time}}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">修改用户：</span><span class="mess font14">{{currentRowList.update_user}}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="messBoxC">
						<span class="messTit font15">修改时间：</span><span class="mess font14">{{currentRowList.update_time}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="tableBox">
			<div style="display: flex;width: 100%;">
				<div style="width: 49%;margin-right: 1%;">
					<vueScroll>
						<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
						 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
							<el-table-column type="index" class="over" fixed>
							</el-table-column>
							<el-table-column type="selection" min-width="50" fixed>
							</el-table-column>
							<el-table-column label="播放模式" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.play_modeName" placement="top">
										<span class="speSpan">{{scope.row.play_modeName}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="视频名称" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
										<span class="speSpan">{{scope.row.name}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="播放时间" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="typeof scope.row.play_time == 'number' ? scope.row.play_time.toString() : scope.row.play_time "
									 placement="top">
										<span class="speSpan">{{scope.row.play_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="开始时间" max-width="120">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.start_time" placement="top">
										<span class="speSpan">{{scope.row.start_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="结束时间" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.end_time" placement="top">
										<span class="speSpan">{{scope.row.end_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="播放开始时间" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.start_day" placement="top">
										<span class="speSpan">{{scope.row.start_day}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="播放结束时间" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.end_day" placement="top">
										<span class="speSpan">{{scope.row.end_day}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页器 -->
						<div class="pag">
							<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
							 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
							</el-pagination>
						</div>
					</vueScroll>
				</div>
				<div style="width: 50%;">
					<vueScroll>
						<el-table :data="tableData1" highlight-current-row ref="moviesTable1" @row-click="rowClick1" @select-all="selectChange1"
						 @selection-change="selectChange1" style="width: 100%" border header-row-class-name='tableHeader'>
							<el-table-column type="index" class="over" fixed>
							</el-table-column>
							<el-table-column type="selection" min-width="50" fixed>
							</el-table-column>
							<el-table-column label="图片名称" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
										<span class="speSpan">{{scope.row.name}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="保留秒数" max-width="140">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="typeof scope.row.retention_time == 'number' ? scope.row.retention_time.toString() : scope.row.retention_time "
									 placement="top">
										<span class="speSpan">{{scope.row.retention_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
					</vueScroll>
				</div>
			</div>
		</div>
		<dialogCom v-if='dialogShow' :rowId='rowId' :currentMode='currentMode' :dialogVisible='dialogShow' :title='title' :ensureLoading='btnLoading' @closeMask='closeMask'
		 @submitDialog='submitDialog'></dialogCom>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	import dialogCom from "./add.vue"
	export default {
		activated() {},
		mounted() {
			this.getTableList()
		},
		components: {
			dialogCom,
		},
		data() {
			return {
				btnType: 'primary',
				showVis: false,
				showProp: true,
				btnLoading: false,
				marketingCode: '',
				tableData: [],
				tableData1: [],
				page: 1,
				page_size: 10,
				total: 0,
				loading: true,
				query: '',
				dialogShow: false,
				title: '',
				disableBtn: true,
				checkBoxArr: [],
				rowId: 0,
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				disableBtnAll: true,
				removePic: true,
				resource: '',
				resourceArr: [{
					label: '图片',
					value: 1
				}, {
					label: '视频',
					value: 2
				}],
				playMode: '',
				playModeArr: [{
					label: '纯视频',
					value: 1
				}, {
					label: '1/2视频',
					value: 2
				}, {
					label: '1/3视频',
					value: 3
				}, {
					label: '纯图片',
					value: 4
				}, {
					label: '1/2图片',
					value: 5
				}, {
					label: '1/3图片',
					value: 6
				}],
				terminal: '',
				terminalArr: [{
					label: '单屏',
					value: 1
				}, {
					label: '双屏',
					value: 2
				}],
				startKb: '',
				endKb: '',
				endDisabled: true,
				removeId: '',
				currentMode:'0'
			}
		},
		computed: {
			BroadcastManageId() {
				if (localStorage.BroadcastManageId) {
					return JSON.parse(localStorage.BroadcastManageId).id
				} else {
					return ''
				}
			},
			currentRowList() {
				if (localStorage.currentRowList) {
					return JSON.parse(localStorage.currentRowList).id
				} else {
					return ''
				}
			},
		},
		methods: {
			goBack() {
				let obj = {
					name: '播放管理',
					router: '/MainView/ReleaseManagement/BroadcastManage'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			removePicClick() {
				this.removeAlert('此操作将永久删除该图片, 是否继续?', () => {
					let url = '/res/queue/material/relation/'
					let data = {
						ids:[this.removeId ]
					}
					this.axiosChange(url, 'delete', data, (res) => {
						if (res.code == 0) {
							this.$message.success('删除成功')
							this.tableData1 = []
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				})
			},
			inputChange(val) {
				if (val) {
					this.endDisabled = false
				} else {
					this.endDisabled = true
					this.endKb = ''
				}
			},
			closeVis() {
				this.showVis = false
				if (this.playMode || this.terminal || this.startKb) {
					this.btnType = 'warning'
				} else {
					this.btnType = 'primary'
				}
			},
			pubLickSearch() {
				if (this.playMode || this.terminal || this.startKb) {
					this.btnType = 'warning'
					this.showVis = true
				} else {
					this.btnType = 'primary'
					this.showVis = false
				}
			},
			remove(val) {
				this.$confirm('此操作将永久删除该队列, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = ''
					let data = {

					}
					let arr = this.checkBoxArr.map((item) => {
						return item.id
					})
					console.log(arr)
					if (val == 1) {
						url = '/res/queue/material/' + this.rowId+'/'

					} else {
						url = '/res/queue/material/'
						data = {
							ids: arr
						}
					}
					axiosDelete(url, data, (res) => {
						if (res.code == 0) {
							this.$message.success('删除成功')
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {

				});
			},
			//新建资源
			newAdd(value) {
				this.dialogShow = true
				console.log(this.dialogShow)
				if (value == 1) {
					this.title = '新建模式'
				} else if (value == 2) {
					this.title = '编辑模式'
				} else if (value == 3) {
					this.title = '模式详情'
				} else if (value == 4) {
					this.title = '新建图片'
				}
			},
			submitDialog() {
				this.dialogShow = false
				this.getTableList()
				this.tableData1 = []
			},
			//关闭添加弹窗
			closeMask(value) {
				this.dialogShow = false
				if (value == 2) {
					this.getTableList()
				}
			},
			//获取表格数据
			getTableList() {
				this.pubLickSearch()
				this.showVis = false
				this.loading = false
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					play_queue: this.BroadcastManageId
				}
				let url = '/res/queue/material/'
				this.axiosGet(url, params, (res) => {
					this.loading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.play_mode == '0') {
								item.play_modeName = '纯视频'
							} else if (item.play_mode == '1') {
								item.play_modeName = '1/2视频'
							}
							if (item.play_mode == '2') {
								item.play_modeName = '1/3视频'
							} else if (item.play_mode == '3') {
								item.play_modeName = '纯图片'
							}
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			find() {
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			reset() {
				this.startKb = ''
				this.endKb = ''
				this.terminal = ''
				this.playMode = ''
				this.showVis = false
				this.resource = ''
				this.page = 1
				this.page1 = 1
				this.page_size = 10
				this.page_size1 = 10
				this.query = ''
				this.getTableList()
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			rowClick1(row, column, event) {
				this.$refs.moviesTable1.toggleRowSelection(row)
			},
			selectChange(res) {
				console.log(res)
				if (res.length == 1) {
					this.tableData1 = res[0].resources
					this.disableBtn = false
					this.rowId = res[0].id
					this.currentMode = res[0].play_mode
				} else {
					this.disableBtn = true
				}
				if (res.length > 1) {
					this.disableBtnAll = false
				} else {
					this.disableBtnAll = true
				}
				this.checkBoxArr = res
			},
			selectChange1(res) {
				if (res.length == 1) {
					this.removeId = res[0].id
					this.removePic = false
				} else {
					this.removeId = ''
					this.removePic = true
				}
			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			handleSizeChange1(size) {
				this.page_size1 = size
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			handleCurrentChange1(page) {
				this.page1 = page
			},
		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}

	}

	.marginTop5 {
		display: inline-block;
		margin-top: 5px;
	}

	.duiBoxMess {
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		border-radius: 5px;
		background: #409EFF;
		padding-left: 30px;

		.messTit {
			color: #fff;
		}

		.mess {
			color: #fff;
		}
	}

	.messBoxC {
		text-align: left;
	}
</style>
